import React, { Component } from 'react';
import { connect } from 'react-redux';
import { TabBar } from 'antd-mobile';
import { 
  AppOutline, 
  UserOutline, 
  ShopbagOutline, 
  HeartOutline,
  TeamOutline,
  MessageOutline
} from 'antd-mobile-icons';
import PropTypes from 'prop-types';
import { setCurrentPage } from '../../store/reducers/appReducer';
import styles from './Footer.module.less';

class Footer extends Component {
  static propTypes = {
    currentPage: PropTypes.string,
    setCurrentPage: PropTypes.func.isRequired,
  };

  static defaultProps = {
    currentPage: 'homePage',
  };

  tabs = [
    {
      key: 'homePage',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: 'teamList',
      title: '球队',
      icon: <TeamOutline />,
    },
    {
      key: 'playerList',
      title: '球员',
      icon: <MessageOutline />,
    },
    {
      key: 'userProfile',
      title: '我的',
      icon: <UserOutline />,
    },
    {
      key: 'productList',
      title: '商品',
      icon: <ShopbagOutline />,
    },
    {
      key: 'favorites',
      title: '收藏',
      icon: <HeartOutline />,
    },
  ];

  handleTabChange = (key) => {
    const { setCurrentPage } = this.props;
    setCurrentPage(key);
    
    // 根据key进行路由跳转
    switch (key) {
      case 'homePage':
        window.location.href = '/';
        break;
      case 'teamList':
        window.location.href = '/teamList';
        break;
      case 'playerList':
        window.location.href = '/playerList';
        break;
      case 'userProfile':
        window.location.href = '/userProfile';
        break;
      case 'productList':
        window.location.href = '/productList';
        break;
      case 'favorites':
        // 收藏页面暂时跳转到首页
        window.location.href = '/';
        break;
      default:
        break;
    }
  };

  render() {
    const { currentPage } = this.props;

    return (
      <TabBar
        className={styles.footer}
        activeKey={currentPage}
        onChange={this.handleTabChange}
        safeArea={false}
      >
        {this.tabs.map(item => (
          <TabBar.Item 
            key={item.key} 
            icon={item.icon} 
            title={item.title}
          />
        ))}
      </TabBar>
    );
  }
}

const mapStateToProps = (state) => ({
  currentPage: state.app.currentPage,
});

const mapDispatchToProps = {
  setCurrentPage,
};

export default connect(mapStateToProps, mapDispatchToProps)(Footer);
